<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iPhone</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <script type="text/javascript" src="layui/layui.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>

<!-- 展示所有 -->
<script type="text/javascript">
    layui.use(["table","layer","form","laydate"],function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var laydate = layui.laydate;
        var $ = layui.jquery;
        table.render({
            elem:"#demo",
            url:"/iPhoneSpringBoot/iphones",
            page:true,
            cols:[[
                {type:"checkbox"},// 显示复选框
                {field:"iphoneId",title:"编号",sort:true},
                {field:"iphoneName",title:"名称"},
                {field:"price",title:"价格"},
                {field:"status",title:"状态",templet:function(d){
                        return d.status == 1 ? "上架":"下架";
                    }},
                {field:"date",title:"日期"},
                {title:"操作",toolbar:"#operation"}
            ]],
            limit:5,
            limits:[5,10,20],//每页显示条数 默认为10
            toolbar:"#toolbar"
        });
        table.on("tool(test)",function (object) {
            if(object.event == "edit"){
                layer.open({
                    type:1,
                    content:$("#updateForm").html(),
                    success:function (layerObj,index) {
                        form.render("radio","updateForm")
                        laydate.render({
                            elem:"#update-date",
                            type:"datetime",
                            format:"yyyy-MM-dd HH:mm:ss",
                            value:new Date(),
                            trigger:'click'
                        })
                        //回显
                        form.val("updateForm",object.data);

                        form.on("submit(update-go)",function (data) {
                            $.ajax({
                                url:"/iPhoneSpringBoot/iphones",
                                type:"put",
                                data:JSON.stringify(data.field),
                                contentType:"application/json",
                                dataType:"json",
                                success:function (result) {
                                    if(result.status == "success"){
                                        layer.close(index);
                                        table.reload("demo");
                                    }else {
                                        alert("更新失败！");
                                    }
                                }
                            })
                            return false;
                        })
                        $("#update-form-cancel").click(function () {
                            layer.close(index);
                        });
                    },
                    area:["400px","300px"]
                })
            }else if(object.event == "delete"){
                $.ajax({
                    url:"/iPhoneSpringBoot/iphones/"+object.data.iphoneId,
                    type:"delete",
                    dataType:"json",
                    success:function (result) {
                        if(result.status == "success"){
                            table.reload("demo");
                        }else{
                            alert("删除失败！")
                        }
                    }
                })
            }
        })
    })
</script>
<!--添加的表单 -->
<script id="addForm" type="text/html" lay-filter="addForm">
    <form class="layui-form" action="" lay-filter="addForm">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" name="iphoneName" required  lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">价格</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" name="price" required  lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div>
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block" style="width:200px">
                <input type="radio" name="status"  value="1" title="上架" checked>
                <input type="radio" name="status"  value="0" title="下架">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">日期</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" class="layui-input" id="add-date" name="date">
            </div>
        </div>
        <div class="layui-form-item" >
            <div class="layui-input-block">
                <button type="submit" lay-submit lay-filter="go" class="layui-btn" id="add-submit-btn">添加</button>
                <button type="button"  class="layui-btn" id="add-form-cancel">取消</button>
            </div>
        </div>
    </form>
</script>
<!--更新的表单 -->
<script id="updateForm" type="text/html">
    <form class="layui-form" action="" lay-filter="updateForm">
        <input type="hidden" name="iphoneId">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" name="iphoneName" required  lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">价格</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" name="price" required  lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div>
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block" style="width:200px">
                <input type="radio" name="status"  value="1" title="上架" checked>
                <input type="radio" name="status"  value="0" title="下架">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">日期</label>
            <div class="layui-input-block" style="width:200px">
                <input type="text" class="layui-input" id="update-date" name="date">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit lay-filter="update-go">更新</button>
                <button type="button" class="layui-btn" id="update-form-cancel">取消</button>
            </div>
        </div>
    </form>
</script>
<script type="text/html" id="toolbar">
    <button type="button" onclick="handleRemoveAny()" class="layui-btn layui-btn-danger layui-btn-xs"><i class="layui-icon layui-icon-delete"/>批量删除</button>
    <button class="layui-btn layui-btn-normal layui-btn-xs" type="button" onclick="openAddForm()">添加 <i class="layui-icon layui-icon-addition"/></button>
    <!-- 1 显示搜索表单 -->
    <div class="layui-inline">
        <form action="" class="layui-form">
            <div class="layui-input-inline">
                <input type="text" name="search" id="search" class="layui-input">
            </div>
            <div class="layui-input-inline">
                <button onclick="handleSearch()" type="button" class="layui-btn layui-btn-primary"><i class="layui-icon layui-icon-search"> </i></button>
            </div>
        </form>
    </div>
</script>
<script type="text/html" id="operation">
    <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</button>
    <button class="layui-btn layui-btn-xs" lay-event="edit">更新</button>
</script>
<!-- 函数 -->
<script type="text/javascript">
    function handleRemoveAny() {
        layui.use("table",function () {
            var $ = layui.jquery;
            var table = layui.table;
            var status = table.checkStatus("demo");
            var ids = [];
            for (var i=0;i<status.data.length;i++){
                ids[i] = status.data[i].iphoneId;
            }
            if(ids.length == 0){
                alert("未选中行！");
                return;
            }
            $.ajax({
                url:"/iPhoneSpringBoot/iphones",
                data:JSON.stringify(ids),
                type:"delete",
                contentType: "application/json",
                dataType:"json",
                success:function (result) {
                    if(result.status == "success"){
                        alert("删除成功！");
                        table.reload("demo");
                    }else{
                        alert("批量删除失败！");
                    }
                }
            })
        })
    }

    function openAddForm() {
        layui.use(["table","form","layer","laydate"],function () {
            var layer = layui.layer;
            var $ = layui.jquery;
            var form = layui.form;
            var laydate = layui.laydate;
            var table = layui.table;
            layer.open({
                type:1,
                content:$("#addForm").html(),
                success:function (layerObj,index) {
                    form.render("radio","addForm");
                    laydate.render({
                        elem:"#add-date",
                        type:"datetime",
                        format:"yyyy-MM-dd HH:mm:ss",
                        value:new Date(),
                        trigger:'click'
                    })
                    form.on("submit(go)",function (data) {
                        $.ajax({
                            url:"/iPhoneSpringBoot/iphones",
                            type:"post",
                            data:JSON.stringify(data.field),
                            contentType:"application/json",
                            dataType:"json",
                            success:function (result) {
                                if(result.status == "success"){
                                    layer.close(index);
                                    table.reload("demo");
                                }else {
                                    alert("添加失败！");
                                }
                            }
                        })
                        return false;
                    })
                    $("#add-form-cancel").click(function () {
                        layer.close(index);
                    })
                },
                area:["400px","300px"]
            })
        })
    }
</script>
</body>
</html>